content<template>
    <div class="xunjingwendao">
        <Navbar :activeMenu="currentPath" />
        <div class="main container">

            <!-- 标题 价格 -->
            <div class="info-box goods-info">
                <div style="width: 40%;"><img style="width: 100%;height: 500px;" :src="swiperList[0]" alt=""></div>
                <div style="width: auto;margin-left: 18px;">

                    <div class="shop-title">
                        {{ goodsData.name }}
                    </div>
                    <div class="price">
                        <span class="jg">价格</span>
                        <span>￥{{ goodsData.salesPrice }}</span>
                        <span class="ys">已售 11</span>
                        <div class="">
                            <span
                                style="font-size: 13px;color: #7a7a7a;    margin: 20px 15px 0 3px;display: inline-block;">数
                                量</span>
                            <el-input-number v-model="spNumber" size="mini" @change="handleChange"
                                :min="1"></el-input-number>
                        </div>
                    </div>
                </div>

            </div>

            <!-- 评价 -->
            <!-- 		<div class="info-box comments" id="comments">
			<div class="row">
				<div class="text">商品评价({{goodsData.comment.number}})</div>
				<div class="arrow" @tap="toRatings">
					<div class="show" @tap="showComments(goodsData.id)">
						查看全部
						<div class="icon xiangyou"></div>
					</div>
				</div>
			</div>
			<div class="comment" @tap="toRatings">
				<div class="user-info">

					<div class="username">{{goodsData.comment.username}}</div>
				</div>
				<div class="content">
					{{goodsData.comment.content}}
				</div>
			</div>
		</div> -->
            <!-- 详情 -->
            <div class="description">
                <div class="title">———— 商品详情 ————</div>
                <div class="content" v-html="goodsData.description"></div>
            </div>

            <!-- 底部菜单 -->
            <div class="shop_footer">

                <div class="icons">



                    <!-- 	<div class="box" @tap="keep">
					<u-icon name="plus-circle"></u-icon>
					<div class="icon" :class="[isKeep?'shoucangsel':'shoucang']"></div>
					<div class="text">{{isKeep?'已':''}}收藏</div>
				</div> -->
                </div>

                <div class="btn">

                    <div class="joinCart" @click="joinCart">加入购物车</div>
                    <div class="buy" @click="buy">立即购买</div>
                </div>
            </div>
            <!-- share弹窗 -->


            <!-- 规格-模态层弹窗 -->

            <!-- 遮罩层 -->





            <!-- 商品主图轮播 -->
        </div>

    </div>
</template>

<script>

import {
    goodListDetails,
    shoppingcartAdd,
    shoppingcartCount
} from '@/api/index'
export default {
    computed: {
        currentPath() {
            return '/shop'; // 获取当前路由路径
        },
    },
    data() {
        return {
            id: "",
            //控制渐变标题栏的参数
            beforeHeaderzIndex: 11, //层级
            cartCount: 0,
            afterHeaderzIndex: 10, //层级
            beforeHeaderOpacity: 1, //不透明度
            shareShow: false,
            spNumber: 1,
            //是否显示返回按钮
            // #ifndef MP
            showBack: true,

            // #endif
            //轮播主图数据
            swiperList: [

            ],
            //轮播图下标
            currentSwiper: 0,
            anchorlist: [], //导航条锚点
            selectAnchor: 0, //选中锚点
            serviceClass: '', //服务弹窗css类，控制开关动画
            shuliang: false, //规格弹窗css类，控制开关动画
            shareClass: '', //分享弹窗css类，控制开关动画
            service: [{
                name: "正品保证",
                description: "此商品官方保证为正品"
            },
            {
                name: "极速退款",
                description: "此商品享受退货极速退款服务"
            },
            {
                name: "7天退换",
                description: "此商品享受7天无理由退换服务"
            }
            ],
            spec: ["XS", "S", "M", "L", "XL", "XXL"],

            // 商品信息
            goodsData: {

                comment: {
                    number: 102,
                    userface: '../../static/img/face.jpg',
                    username: '大黑哥',
                    content: '很不错，之前买了很多次了，很好看，能放很久，和图片色差不大，值得购买！'
                },

            },
            selectSpec: null, //选中规格
            isKeep: false, //收藏
            //商品描述html
        };
    },

    mounted() {
        this.shoppingcartCountData()
        this.id = this.$route.query.id;
        this.goodsDetails(this.$route.query.id)
    },

    methods: {
        shoppingcartCountData() {
            shoppingcartCount({}).then((res) => {
                console.log(res)

                this.cartCount = res.data;
            })
        },

        goodsDetails(id) {
            goodListDetails(id).then((res) => {
                console.log(res, "sss")
                this.swiperList = res.data.picUrls;
                console.log(this.swiperList)
                this.goodsData = Object.assign(this.goodsData, res.data);
                this.goodsData['number'] = 0;
                this.goodsData.description = this.goodsData.description.replace(/<img/g,
                    '<img style="width:100%" ')
                this.goodsData.description = this.goodsData.description.replace(/<p/g,
                    '<p style="padding-bottom:50px" ')
            })
        },


        //收藏
        keep() {
            this.isKeep = this.isKeep ? false : true;
        },
        // 加入购物车
        joinCart() {

            let data = {
                spuId: this.goodsData.id,
                addPrice: this.goodsData.salesPrice,
                quantity: this.spNumber,
                spuName: this.goodsData.name,
                picUrl: this.goodsData.picUrls[0],
            }
            shoppingcartAdd(data).then((res) => {
                if (res.code == 200) {
                    this.$confirm('加入购物车成功', '提示', {
                        confirmButtonText: '去购物车',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$router.push({
                            name: "shopCart"
                        })
                    })

                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }
            })
        },
        //立即购买
        buy() {
            console.log(this.shuliang)
            this.shuliang = true
            let data = {
                salesPrice: this.goodsData.salesPrice,
                number: this.spNumber,
                name: this.goodsData.name,
                picUrls: this.goodsData.picUrls[0],
                spuId: this.goodsData.id,

            }
            this.$router.push({
                path: '/shopPay',
                query: {
                    type: 'order',
                    goodsData: JSON.stringify(data),
                    sumPrice: this.sumPrice
                }
            })
        },
        //商品评论


        //跳转评论列表
        showComments(goodsid) {

        },
        //选择规格
        setSelectSpec(index) {
            this.selectSpec = index;
        },

        toChat() {

        },

        //服务弹窗
        showService() {
            console.log('show');
            this.serviceClass = 'show';
        },
        //关闭服务弹窗
        hideService() {
            this.serviceClass = 'hide';
            setTimeout(() => {
                this.serviceClass = 'none';
            }, 200);
        },
        //规格弹窗
        showSpec(fun) {
            console.log('show');
            this.specClass = 'show';
            this.specCallback = fun;
        },
        specCallback() {
            return;
        },
        hideSpecHide() {
            this.specClass = 'hide';
        },
        handleChange(val) {
            this.spNumber = val
        },

        discard() {
            //丢弃
        }
    }
};
</script>

<style lang="scss">
page {
    background-color: #f8f8f8;
}


.icon {
    font-size: 26px;
}

.status {
    width: 100%;
    height: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    /*  #ifdef  APP-PLUS  */
    height: var(--status-bar-height); //覆盖样式
    /*  #endif  */
    background-color: #f1f1f1;
    transition: opacity 0.05s linear;
}



.swiper-box {
    position: relative;
    width: 100%;

}

.info-box {
    width: 100%;
    display: flex;
    background-color: #fff;
    margin-bottom: 20px;
}

.goods-info {
    .price {
        font-size: 18px;
        font-weight: 600;
        color: #f47925;
        margin-top: 20px;

        .jg {
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 500;
            height: 20px;
            line-height: 20px;
            margin-right: 2px;
        }

        .ys {

            color: #7a7a7a;

            padding-left: 20px;

            font-size: 14px;
            font-weight: 400;
            height: 22px;
            letter-spacing: -.02em;
            line-height: 22px;
        }
    }

    .shop-title {
        font-size: 20px;
        padding-top: 15px;
        font-weight: 800;
    }
}



.comments {
    height: 200px;
    padding: 10px;

    .row {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin: 0 0 30px 0;

        .text {
            font-size: 14px;
        }

        .arrow {
            font-size: 14px;
            position: absolute;
            right: 4%;
            color: #17e6a1;

            .show {
                display: flex;
                align-items: center;

                .icon {
                    color: #17e6a1;
                }
            }
        }
    }

    .comment {
        width: 100%;

        .user-info {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;

            .face {
                width: 40px;
                height: 40px;
                margin-right: 8px;

                image {
                    width: 40px;
                    height: 40px;
                    border-radius: 100%;
                }
            }

            .username {
                font-size: 14px;
                color: #999;
            }
        }

        .content {
            margin-top: 30px;
            font-size: 15px;
        }
    }
}

.description {
    width: 80%;


    .title {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #999;
    }
}

.shop_footer {
    position: fixed;
    top: 211px;

    right: 15.8%;



    z-index: 2;

    .content {
        margin: 20px;
    }

    .icons {
        display: flex;


        .custom-bar {


            .custom-bar-text {
                position: absolute;
                top: -2px;
                right: -9px;
                border-radius: 50%;
                color: #fff;
                width: 13px;
                height: 13px;
                text-align: center;
                line-height: 10px;
                background-color: red;

                font-size: 13px;
            }
        }

        .box {
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;

            button::after {
                border: none;
            }

            .icon {
                font-size: 14px;
                color: #828282;
            }

            .text {
                display: flex;
                justify-content: center;
                width: 100%;
                font-size: 12px;
                color: #666;
            }
        }
    }

    .btn {


        overflow: hidden;
        display: flex;
        margin-right: -2%;




        .joinCart {
            width: 110px;
            height: 46px;
            text-align: center;
            line-height: 46px;
            font-size: 16px;
            margin-left: 15px;
            border: 1px solid #d4bc98;
            border-radius: 8px 0 0 9px;
            color: #91512b;
            font-weight: 600;
            cursor: pointer;
        }

        .buy {
            width: 110px;
            height: 46px;
            text-align: center;
            line-height: 48px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            margin-left: 15px;
            position: relative;
            border-radius: 0 8px 8px 0;
            background: #91512b;
            color: #fff;
            margin-left: 0
        }
    }
}
</style>